<script setup lang="ts">

import {Delete,Bottom,EditPen,ElementPlus} from "@element-plus/icons-vue";
import {ref} from "vue";
// @ts-ignore
import { saveAs } from 'file-saver'


import {digElMessage} from '../../../common/Message.ts'

import { deleteFileApi, shareFileApi} from '../FileApi.ts'
const props=defineProps<{
  fileInfo:{
    fileId:""
    fileName:""
    filePath:""
    fileUploadTime:""
    folderId:""
    userId:"",
    fileType?:""

  }
}>();



let showProper=ref()

let imgUrl=ref("/logo/other.png")
let suffix=props.fileInfo.fileName.substring(props.fileInfo.fileName.lastIndexOf(".")+1);


if(suffix=="jpg"||suffix=="png"||suffix=="svg"){
       imgUrl.value=props.fileInfo.filePath
}

if(suffix=="pdf"){
  imgUrl.value="logo/pdf.png"
}
if(suffix==="exe"){
  imgUrl.value="logo/exe.png"
}
if(suffix=="zip"){
  imgUrl.value="logo/zip.png"
}
if(suffix=="doc"){
  imgUrl.value="logo/doc.png"
}
if(suffix=="docx"){
  imgUrl.value="logo/docx.png"
}
if(suffix=="jar"){
  imgUrl.value="logo/jar.png"
}
if(suffix=="rar"){
  imgUrl.value="logo/rar.png"
}
const dowmFile=()=>{
   saveAs(props.fileInfo.filePath,props.fileInfo.fileName)
}

const openFile=()=>{
  let link = document.createElement('a')
  link.style.display = 'none'
  link.href = props.fileInfo.filePath
  document.body.appendChild(link)
  link.click()
  link.remove()

}



const emit=defineEmits<{
  (e:"updateData"):void
}>()
const deleteFile=async ()=>{
  let ssm=props.fileInfo.filePath.substring(props.fileInfo.filePath.lastIndexOf("/")+1);


  let fileMd5=ssm.substring(0,ssm.lastIndexOf("."))

 await deleteFileApi({fileName:props.fileInfo.fileName,fileMd5:fileMd5}).then(res=>{
    if(res.code=='00000'){

      setTimeout(()=>{
        emit("updateData")
      },0)
      digElMessage('删除文件成功','success',800);

    }})
}


 //分享文件


let centerDialogVisible=ref(false)

let lostData=ref(0)

const options = [
  {
    value: '0',
    label: '永不过期',
  },
  {
    value: '1',
    label: '1天以后过期',
  },
  {
    value: '7',
    label: '7天以后过期',
  },
  {
    value: '30',
    label: '30天以后过期',
  },
  {
    value: '50',
    label: '50天以后过期',
  },

]


let password=ref("")
const shareFile=()=>{
  centerDialogVisible.value=true;
}

const shareFileSubmit=async ()=>{


  lostData.value=lostData.value>=0?lostData.value:0

  if(password.value==""){
    digElMessage("请设置密码","warning",1000)
  }

  else{

    let data={
      loseData: lostData.value,
      shareFileType: 0,
      shareId: props.fileInfo.fileId,
      sharePassword: password.value
    }

   await shareFileApi(data).then(res=>{

     if(res.code=='00000'){
         digElMessage("生成链接成功" +
             `${res.data}`,"success",1000)
     }

     centerDialogVisible.value=false;
   })

  }
}


</script>

<template>

  <el-popover placement="right-start" :width="10" trigger="click" hide-after="100" ref="showProper">
    <template #reference>
  <div class="fileContainer">
    <div class="folderWrapper">
      <div class="folder">
         <el-image :src="imgUrl" style="height: 50px;width: 50px"></el-image>
      </div>
      <div class="folderName" style="width: 90px" >
       <el-text :line-clamp="1" style="font-size: 14px;  font-family: 华文楷体;">
        {{props.fileInfo.fileName}}</el-text>
      </div>
<!--      <div class="folderTime" style="width: 90px">-->
<!--        <el-text :line-clamp="1"    style="font-size: 10px;  font-family: 华文楷体;">{{props.fileInfo.fileUploadTime}}</el-text>-->

<!--      </div>-->
    </div>
  </div>

    </template>

    <div class="dig_select" >
     <div >
       <el-button style="font-size: 10px;width: 15px;height: 15px" type="primary" :icon="Bottom"  @click="dowmFile"  circle />
       <el-text type="info"  @click="dowmFile">下载</el-text>
     </div>
      <div>
        <el-button style="font-size: 10px;width: 15px;height: 15px" type="danger" :icon="Delete" circle @click="deleteFile" />
        <el-text type="info" @click="deleteFile">删除</el-text>
      </div>

      <div>
        <el-button style="font-size: 10px;width: 15px;height: 15px" type="success" :icon="EditPen" circle @click="openFile" />
        <el-text type="info" @click="openFile">查看</el-text>
      </div>
      <div>
        <el-button style="font-size: 10px;width: 15px;height: 15px" type="info" :icon="ElementPlus" circle  @click="shareFile" />
        <el-text type="info"  @click="shareFile">分享</el-text>
      </div>

    </div>

<!--    <el-button type="success" :icon="Check" circle />-->
<!--    <el-button type="info" :icon="Message" circle />-->
  </el-popover>


<!--  弹出框-->

  <el-dialog v-model="centerDialogVisible" title="分享文件" width="500" center>


<!--    过期时间-->

   <div class="lost_time" style="margin-bottom: 20px">

     <el-button type="info" style="border-right: none" plain="true" bg="true" size="default">过期时间</el-button>

     <el-select
         size="default"
         v-model="lostData"
         placeholder="Select"

         style="width: 240px"
     >
       <el-option
           v-for="item in options"
           :key="item.value"
           :label="item.label"
           :value="item.value"
       />


     </el-select>
   </div>

<!--    设置密码-->

    <div class="lost_password">
      <el-input
          v-model="password"

          placeholder=""
          style="width: 330px"
      >
        <template #prepend>设置密码</template>
      </el-input>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="shareFileSubmit">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<style scoped lang="less">
.folderContainer {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 50px;
  font-family: "Informal Roman";
  //font-family: 华文楷体;
}

.folder {
  width: 70px;
  height: 80px;
  perspective: 600px;
  transform-style: preserve-3d;
  cursor: pointer;
}
.folderWrapper{
  padding: 10px 20px 10px 10px;
  position: relative;
  transition: all .2s ease;
  border-radius: 6px;
  cursor: pointer;

}
.folderWrapper:hover{
  background-color: #ffffff;
}

.folder div.back, .folder div.front {
  position: absolute;
  top: 0;
  left: 0;
  width: 80px;
  height: 60px;
  background-color: #c5b7f1;
}

.folder div.center {
  width: 90px;
  height: 60px;
  background-color: #ffffff;
  position: absolute;
  top: 5px;
  left: 10px;
  z-index: 2;
  border-radius: 6px;
}

.folder .front {
  background-image: linear-gradient(to left, #24d5ff 0%, #1eb2ff 45%, #1890ff 100%);
  border-radius: 6px;
  z-index: 3;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  color: rgba(0,0,0,1);
  font-weight: 500;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  box-shadow: 0 1px rgba(255, 255, 255, 0.25) inset, 0 -2px 2px rgba(0, 0, 0, 0.1);
  transform: rotateX(-30deg);
  transform-origin: bottom;
  transition: all .2s ease;

}

.folder:hover .front {
  transform: rotateX(-40deg);
}
.folderName {
  margin-top: 10px;
  font-size: 14px;
  font-weight: 500;
  color: rgb(37, 48, 43);
}

.folderTime {

  font-size: 14px;
  font-weight: 500;
  color: rgb(37, 48, 43);


}

.dig_select{
 margin-left: 10px;
   div{
     margin-bottom: 10px;
     .el-button{
        margin-right: 10px;
     }
   }
}

</style>